@page
@{ Layout = "_LayoutApp"; }
@section Styles{
    <style>
        html {
            overflow-x: hidden !important;
        }

        body {
            padding: 0;
            margin: 0;
        }
    </style>
}
<div id="videoPlayer" class="z-2"></div>
<div class="z-1">
    <div class="card rounded-0">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center">
                <div class="fw-semibold mb-2">{{ courseInfo.name }}</div>
                <a href="javascript:;" v-on:click="btnCollectionClick">
                    <i class="bi bi-heart-fill fs-3 text-danger" v-if="courseUser.collection"></i>
                    <i class="bi bi-heart fs-3 text-warning" v-else></i>
                </a>
            </div>
            <div class="d-flex lh-1 mt-3">
                <span class="fw-medium me-1">
                    {{ eAvg }}
                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
                        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                    </svg>
                </span>
                <span class="fw-medium">({{ eUser }})</span>
            </div>
            <div class="mt-2">
                <span class="me-1" v-for="mark in courseInfo.mark">
                    <el-tag size="mini">{{ mark }}</el-tag>
                </span>
            </div>
        </div>
    </div>
    <div class="p-3">
        <div class="card rounded-4 mb-3"  v-if="courseInfo.duration>courseUser.totalDuration">
            <div class="w-100">
                <div class="progress" role="progressbar">
                    <div class="progress-bar progress-bar-striped progress-bar-animated bg-success text-end" :style="{width:(utils.formatPercentFloat(courseUser.totalDuration,courseInfo.duration))+'%'}">{{ utils.formatPercentFloat(courseUser.totalDuration,courseInfo.duration) }}%</div>
                </div>
            </div>
        </div>
        <div class="card rounded-4 mb-3" id="courseAccordion">
            <div>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item p-0 bg-transparent">
                        <a class="h4 mb-0 d-flex align-items-center py-3 px-4" data-bs-toggle="collapse" href="#courseTwo" role="button" aria-expanded="false" aria-controls="courseTwo">
                            <div class="me-auto">
                                学习进度
                                <p class="mb-2 fs-6 mt-1 fw-normal">{{ courseInfo.wareOverTotal }}/{{ courseInfo.wareTotal }} 章节</p>
                                <p class="mb-0 fs-6 mt-1 fw-normal">{{ utils.formatDuration(courseUser.totalDuration) }}/{{ utils.formatDuration(courseInfo.duration) }} 学时</p>
                            </div>
                            <span class="chevron-arrow ms-4">
                                <i class="bi bi-check-circle-fill fs-4 text-success" v-if="courseInfo.state"></i>
                                <i class="bi bi-check-circle-fill fs-4" v-else></i>
                            </span>
                        </a>
                        <div class="collapse" id="courseTwo" data-bs-parent="#courseAccordion">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">
                                    <div class="text-center">
                                        <div class="mb-3">
                                            <el-progress type="circle" :stroke-width="12" :percentage="utils.formatPercentFloat(courseInfo.wareOverTotal,courseInfo.wareTotal)" status="success"></el-progress>
                                        </div>
                                        <div class="mb-3 text-center">
                                            <span v-if="courseInfo.state" class="text-success">{{ courseInfo.stateStrMsg }}</span>
                                            <span v-else class="text-warning">{{ courseInfo.stateStrMsg }}</span>
                                        </div>
                                        <small>{{ utils.formatPercentFloat(courseInfo.wareOverTotal,courseInfo.wareTotal) }}%</small>
                                    </div>
                                </li>
                                <li class="list-group-item" v-for="ware in courseWareList">
                                    <a href="javascript:;" class="d-flex justify-content-between align-items-center" v-on:click="btnPlayWare(ware)">
                                        <div>
                                            <img v-if="ware.id===courseWareCurrent.id && playing" src="/sitefiles//assets/images/ing.gif" />
                                            <i v-else-if="ware.state==='Yiwancheng'" class="bi bi-check-circle-fill me-2 text-success"></i>
                                            <i v-else class="bi bi-play-fill me-2"></i>
                                            <span>
                                                {{ ware.courseWareInfo.fileName }}
                                            </span>
                                        </div>
                                        <div>
                                            <span>{{ utils.formatDuration(ware.courseWareInfo.duration) }}</span>
                                        </div>
                                    </a>
                                    <div class="mt-2">
                                        <small>{{ utils.formatDuration(ware.totalDuration) }}</small>
                                        <el-tag v-if="ware.state==='Yiwancheng'" size="mini" type="success">已学完</el-tag>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="card rounded-4 mt-3">
            <div>
                <div class="card-header">
                    <h4 class="mb-0">课程数据</h4>
                </div>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item bg-transparent" v-if="courseInfo.state || courseInfo.boolWare">
                        <i class="bi bi-star-fill text-success me-2"></i>
                        课时：{{ courseInfo.studyHour}}<span class="text-success">（已完成课时）</span>
                    </li>
                    <li class="list-group-item bg-transparent" v-else>
                        <i class="bi bi-star-fill text-warning me-2"></i>
                        课时：{{ courseInfo.studyHour}}（{{ utils.formatDuration(courseUser.totalDuration) }}/{{ utils.formatDuration(courseInfo.duration) }}）
                    </li>
                    <li class="list-group-item bg-transparent" v-if="courseInfo.state">
                        <i class="bi bi-star-fill text-success me-2"></i>
                        已获得学分：{{ courseInfo.credit}}
                    </li>
                    <li class="list-group-item bg-transparent" v-else>
                        <i class="bi bi-star-fill text-warning me-2"></i>
                        学分：{{ courseInfo.credit}}（完成课程可以获得）
                    </li>
                    <li class="list-group-item bg-transparent" v-if="courseInfo.state">
                        <span v-if="courseInfo.examId>0">
                            <i class="bi bi-star-fill text-success me-2"></i>
                            已通过课后考试（{{ courseInfo.maxScore }}）
                        </span>
                        <span v-else>
                            <i class="bi bi-star-fill text-success me-2"></i>
                            无课后考试
                        </span>
                    </li>
                    <li class="list-group-item bg-transparent" v-else>
                        <span v-if="courseInfo.examId>0">
                            <span v-if="courseInfo.boolWare">
                                <span v-if="courseInfo.boolExam">
                                    <i class="bi bi-star-fill text-success me-2"></i>
                                    已通过课后考试（{{ courseInfo.maxScore }}）
                                </span>
                                <span v-else>
                                    <i class="bi bi-star-fill text-warning me-2"></i>
                                    <el-link type="warning" v-on:click="btnViewExamClick">前往课后考试</el-link>
                                </span>
                            </span>
                            <span v-else>
                                <i class="bi bi-star-fill text-warning me-2"></i>
                                <el-link type="warning" v-on:click="utils.error('请先完成章节学习',{layer:true})">前往课后考试</el-link>
                            </span>
                        </span>
                        <span v-else>
                            <i class="bi bi-star-fill text-success me-2"></i>
                            无课后考试
                        </span>
                    </li>
                    <li class="list-group-item bg-transparent" v-if="courseInfo.state">
                        <span v-if="courseInfo.examQuestionnaireId>0">
                            <i class="bi bi-star-fill text-success me-2"></i>
                            已提交课后问卷
                        </span>
                        <span v-else>
                            <i class="bi bi-star-fill text-success me-2"></i>
                            无课后问卷
                        </span>
                    </li>
                    <li class="list-group-item bg-transparent" v-else>
                        <span v-if="courseInfo.examQuestionnaireId>0">
                            <span v-if="courseInfo.boolWare">
                                <span v-if="courseInfo.boolExam">
                                    <span v-if="courseInfo.boolExamQ">
                                        <i class="bi bi-star-fill text-success me-2"></i>
                                        已提交课后问卷
                                    </span>
                                    <span v-else>
                                        <i class="bi bi-star-fill text-warning me-2"></i>
                                        <el-link type="warning" v-on:click="btnViewExamQClick">前往课后问卷</el-link>
                                    </span>
                                </span>
                                <span v-else>
                                    <i class="bi bi-star-fill text-warning me-2"></i>
                                    <el-link type="warning" v-on:click="utils.error('请先通过课后考试',{layer:true})">前往课后问卷</el-link>
                                </span>
                            </span>
                            <span v-else>
                                <i class="bi bi-star-fill text-warning me-2"></i>
                                <el-link type="warning" v-on:click="utils.error('请先完成章节学习',{layer:true})">前往课后问卷</el-link>
                            </span>
                        </span>
                        <span v-else>
                            <i class="bi bi-star-fill text-success me-2"></i>
                            无课后问卷
                        </span>
                    </li>
                    <li class="list-group-item bg-transparent" v-if="courseInfo.state">
                        <span v-if="courseInfo.studyCourseEvaluationId>0">
                            <i class="bi bi-star-fill text-success me-2"></i>
                            已提交评价（{{ courseUser.avgEvaluation }}）
                        </span>
                        <span v-else>
                            <i class="bi bi-star-fill text-success me-2"></i>
                            无课后评价
                        </span>
                    </li>
                    <li class="list-group-item bg-transparent" v-else>
                        <span v-if="courseInfo.studyCourseEvaluationId>0">
                            <span v-if="courseInfo.boolWare">
                                <span v-if="courseInfo.boolExam">
                                    <span v-if="courseInfo.boolEvaluation">
                                        <i class="bi bi-star-fill text-success me-2"></i>
                                        已提交评价（{{ courseUser.avgEvaluation }}）
                                    </span>
                                    <span v-else>
                                        <i class="bi bi-star-fill text-warning me-2"></i>
                                        <el-link type="warning" v-on:click="btnViewEvaluationClick">前往课后评价</el-link>
                                    </span>
                                </span>
                                <span v-else>
                                    <i class="bi bi-star-fill text-warning me-2"></i>
                                    <el-link type="warning" v-on:click="utils.error('请先通过课后考试',{layer:true})">前往课后评价</el-link>
                                </span>
                            </span>
                            <span v-else>
                                <i class="bi bi-star-fill text-warning me-2"></i>
                                <el-link type="warning" v-on:click="utils.error('请先完成章节学习',{layer:true})">前往课后评价</el-link>
                            </span>
                        </span>
                        <span v-else>
                            <i class="bi bi-star-fill text-success me-2"></i>
                            无课后问卷
                        </span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="card rounded-4 mt-3">
            <div>
                <div class="card-header">
                    <h4 class="mb-0">完成条件</h4>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled mb-0 d-flex flex-column gap-2">
                        <li class="d-flex flex-row gap-2">
                            <span>
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-circle-fill text-success" viewBox="0 0 16 16">
                                    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"></path>
                                </svg>
                            </span>
                            <span>完成所有章节的学习，单个章节完成之前不允许拖拽</span>
                        </li>
                        <li class="d-flex flex-row gap-2" v-if="courseInfo.examId>0">
                            <span>
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-circle-fill text-success" viewBox="0 0 16 16">
                                    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"></path>
                                </svg>
                            </span>
                            <span>参加课后考试并及格</span>
                        </li>
                        <li class="d-flex flex-row gap-2" v-if="courseInfo.examQuestionnaireId>0">
                            <span>
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-circle-fill text-success" viewBox="0 0 16 16">
                                    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"></path>
                                </svg>
                            </span>
                            <span>参加课后问卷并提交</span>
                        </li>
                        <li class="d-flex flex-row gap-2" v-if="courseInfo.studyCourseEvaluationId>0">
                            <span>
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-circle-fill text-success" viewBox="0 0 16 16">
                                    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"></path>
                                </svg>
                            </span>
                            <span>参与课后评价</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="card rounded-4 mt-3">
            <div>
                <div class="card-header">
                    <h4 class="mb-0">课程评价</h4>
                </div>
                <div class="p-3" v-if="eUser>0">
                    <div class="mb-3">
                        <div class="row align-items-center">
                            <div class="col-auto text-center">
                                <h3 class="display-2 fw-bold">{{ eAvg }}</h3>
                                <span class="fs-6">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
                                        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                    </svg>
                                </span>
                                <p class="mb-0 fs-6">({{ eUser }})</p>
                            </div>
                            <div class="col order-3 order-md-2">
                                <div class="progress mb-3" style="height: 6px">
                                    <div class="progress-bar bg-warning" role="progressbar" :style="{ width:utils.formatPercentFloat(eStarList[0],eUser)+'%' }" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                                <div class="progress mb-3" style="height: 6px">
                                    <div class="progress-bar bg-warning" role="progressbar" :style="{ width:utils.formatPercentFloat(eStarList[1],eUser)+'%' }" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                                <div class="progress mb-3" style="height: 6px">
                                    <div class="progress-bar bg-warning" role="progressbar" :style="{ width:utils.formatPercentFloat(eStarList[2],eUser)+'%' }" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                                <div class="progress mb-3" style="height: 6px">
                                    <div class="progress-bar bg-warning" role="progressbar" :style="{ width:utils.formatPercentFloat(eStarList[3],eUser)+'%' }" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                                <div class="progress mb-0" style="height: 6px">
                                    <div class="progress-bar bg-warning" role="progressbar" :style="{ width:utils.formatPercentFloat(eStarList[4],eUser)+'%' }" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr class="my-5">
                    <div class="mb-3">
                        <div class="d-flex justify-content-between align-items-center  border-bottom pb-4 mb-4" v-for="eItem in eList">
                            <div class="d-flex align-items-start">
                                <img :src="eItem.avatarUrl || DEFAULT_AVATAR_URL" alt="" class="rounded-circle avatar-sm">
                                <div class="ms-3">
                                    <h4 class="mb-1">
                                        {{ eItem.displayName }}

                                    </h4>
                                    <small>{{ utils.getFriendlyDateTime(eItem.starDateTime) }}</small>
                                    <div class="mb-2">
                                        <span class="fs-6">
                                            <el-rate v-model="eItem.star"
                                                     disabled
                                                     show-score
                                                     :max="eItem.maxStar"
                                                     text-color="#ff9900">
                                            </el-rate>
                                        </span>
                                    </div>
                                    a
                                </div>
                            </div>
                        </div>
                        <div class="mt-5 text-center">
                            <el-button icon="el-icon-refresh-right" v-if="eList.length>0 && eList.length<eTotal" v-on:click="btnLoadMoreEvaluationClick" :loading="eLoadMoreLoading">加载更多</el-button>
                            <small v-else>没有更多了</small>
                        </div>
                    </div>
                </div>
                <div class="text-center p-5" v-else>
                    <small><i class="bi bi-clipboard me-2"></i>暂无评价</small>
                </div>
            </div>
        </div>
        <div class="card rounded-4 mt-3">
            <div>
                <div class="card-header">
                    <h4 class="mb-0">课程介绍</h4>
                </div>
                <div class="card-body">
                    <p v-html="courseInfo.description"></p>
                </div>
            </div>
        </div>
    </div>
    <div class="py-8"></div>
    <div style="position:fixed;left:0;bottom:0;width:100%;" class="text-center mb-5 animate__animated animate__fadeInUp">
        <div class="btn-group">
            <button type="button" class="btn btn-primary rounded-pill" v-on:click="utils.closeLayerSelf"><i class="el-icon-back me-2"></i>返 回</button>
        </div>
    </div>
</div>
@section Scripts{
    <script src="/sitefiles/assets/lib/xgplayer/index.js" type="text/javascript"></script>
    <script src="/sitefiles/assets/lib/geeks/js/bootstrap.bundle.min.js" type="text/javascript"></script>
    <script src="/sitefiles/assets/js/app/study/studyCourseInfo.js" type="text/javascript"></script>
}